<template>
  <view class="message-page">
	  <!-- 粒子特效背景 -->
	  <view class="particles">
	  		<view v-for="(particle, i) in particles" :key="i" 
	  			  class="particle" 
	  			  :style="{
	  				left: `${particle.x}%`,
	  				top: `${particle.y}%`,
	  				width: `${particle.size}px`,
	  				height: `${particle.size}px`,
	  				background: particle.color,
	  				opacity: particle.opacity,
	  				animationDelay: `${particle.delay}s`
	  			  }"></view>
	  </view>
    <!-- 消息分类 -->
  <!--  <scroll-view scroll-x class="category-scroll">
      <view 
        v-for="(item, index) in categories" 
        :key="index"
        class="category-item"
        :class="{ active: currentCategory === item.type }"
        @click="switchCategory(item.type)"
      >
        {{ item.name }}
        <view class="badge" v-if="item.badge > 0">{{ item.badge }}</view>
      </view>
    </scroll-view> -->
    
    <!-- 消息列表 -->
    <scroll-view 
      scroll-y 
      class="message-list"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <!-- 私信 -->
      <template v-if="currentCategory === 'private'">
        <view 
          v-for="item in privateMessages" 
          :key="item.id"
          class="message-item"
          @click="toChat(item.user.id)"
        >
		  <u-avatar :src="item.user.avatar" class="avatar"></u-avatar>
          <view class="content" style="margin-left: 20rpx;">
            <view class="top">
              <text class="name">{{ item.user.nickname }}</text>
              <text class="time">{{ formatTime(item.lastTime) }}</text>
            </view>
            <view class="preview">
              <text class="text">{{ item.lastMessage }}</text>
              <view class="unread" v-if="item.unread > 0">{{ item.unread }}</view>
            </view>
          </view>
        </view>
      </template>
      
      <!-- 互动通知 -->
      <template v-else-if="currentCategory === 'interaction'">
        <view 
          v-for="item in interactions" 
          :key="item.id"
          class="interaction-item"
		  @click.native.stop="details(item)"
        >
		  <u-avatar @click.native.stop="userSend(item)" :src="item.sender.avatar" class="avatar"></u-avatar>
          <view class="content" style="margin-left: 20rpx;">
            <view class="text">
              <text class="name">{{ item.sender.nickname }}</text>
              <text>{{ getActionText(item.type) }}</text>
              <!-- <text class="target" v-if="item.content">"{{ item.content }}"</text> -->
			  <text class="target" >{{item.related_content.content}}</text>
            </view>
            <view class="time">{{ formatTime(item.created_at) }}</view>
          </view>
          <image 
            v-if="item.related_content.cover" 
            :src="item.related_content.cover.url" 
            class="post-image"
          ></image>
        </view>
      </template>
	  <!-- 访客 -->
	  <template v-else-if="currentCategory === 'visitor'">
	    <view 
	      v-for="item in interactionsVisitor" 
	      :key="item.id"
	      class="interaction-item"
	    >
	  	  <u-avatar @click.native.stop="userSend(item)" :src="item.visitor_info.avatar" class="avatar"></u-avatar>
	      <view class="content" style="margin-left: 20rpx;">
	        <view class="text">
	          <text class="name">{{ item.visitor_info.nickname }}</text>
	          <text style="margin-left: 15rpx;">访问了你</text>
			  <text class="target" style="font-size: 26rpx;" v-html="item.visited_type_text"></text>
	        </view>
	        <view class="time" >{{ formatTime(item.created_at) }}</view>
	      </view>
	      <image 
		  @click.stop="send(item)"
			src="../../static/image/fas.png"
	        class="post-image"
	      ></image>
	    </view>
	  </template>
      
      <!-- 系统通知 -->
      <template v-else>
        <view 
          v-for="item in systemNotices" 
          :key="item.id"
          class="notice-item"
        >
          <view class="title">
            <text class="type">{{ item.type }}</text>
            <text class="time">{{ formatTime(item.time) }}</text>
          </view>
          <view class="content">{{ item.content }}</view>
          <view class="actions" v-if="item.actions">
            <button 
              v-for="(action, index) in item.actions" 
              :key="index"
              class="action-btn"
			  open-type="contact"
              :class="{ primary: action.primary }"
            >
              {{ action.text }}
            </button>
          </view>
        </view>
      </template>
      
      <!-- 加载更多 -->
      <view class="load-more">
        <text v-if="loading">加载中...</text>
        <text v-else-if="noMore">没有更多了</text>
      </view>
	  
	  
    </scroll-view>
		<u-popup :show="show" @close="show = false" :round="20" mode="bottom">
		  <view class="popup-container">
		    <view class="popup-header">
		      <text class="popup-title">活动套餐上报</text>
		      <u-icon name="close" size="24" @click="show = false" class="close-icon"></u-icon>
		    </view>
		    
		    <view class="popup-content">
		      <u-form :model="form" ref="form" :rules="rules" label-width="160rpx">
		        <!-- 新手机号输入 -->
		        <u-form-item label="新手机号" prop="newMobile" label-position="top" class="form-item">
		          <u-input 
		            v-model="form.newMobile" 
		            placeholder="请输入11位手机号码" 
		            type="number"
		            maxlength="11"
		            class="custom-input"
		            :custom-style="inputStyle"
		          ></u-input>
		        </u-form-item>
		        
		        <!-- 验证码部分 -->
		        <u-form-item label="验证码" prop="code" label-position="top" class="form-item">
		          <u-input 
		            v-model="form.code" 
		            placeholder="请输入6位验证码" 
		            type="number"
		            class="custom-input"
		            :custom-style="inputStyle"
		          ></u-input>
		          
		          <view class="hint-text">
		            请联系客服获取验证码，发送新手机号给客服即可
		          </view>
		          
		          <view class="service-btn-container">
		            <u-button 
		              type="primary" 
		              @click="contactService"
		              :loading="contactLoading"
		              class="service-btn"
		              shape="circle"
		            >
		              <u-icon name="server-fill" size="20" class="btn-icon"></u-icon>
		              联系客服
		            </u-button>
		          </view>
		        </u-form-item>
		        
		        <!-- 提交按钮 -->
		        <view class="submit-btn-container">
		          <u-button 
		            type="primary" 
		            @click="submitForm"
		            :loading="submitLoading"
		            class="submit-btn"
		            shape="circle"
		            :disabled="!form.newMobile || !form.code"
		          >
		            确认提交
		          </u-button>
		        </view>
		      </u-form>
		    </view>
		  </view>
		</u-popup>
	<BottomNav currentPage="messages"></BottomNav>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 'interaction',
      scrollLeft: 0,
      refreshing: false,
      loading: false,
      noMore: false,
      categories: [
		// { type: 'private', name: '私信', badge: '' },
        // { type: 'visitor', name: '访客', badge: '' } ,
		{ type: 'interaction', name: '互动', badge: '' },
		// { type: 'notice', name: '通知', badge: 0 },
      ],
      // 私信数据
      privateMessages: [],
	  particles: [],
      // 互动通知数据
      interactions: [],
      // 系统通知数据
      systemNotices: [
       
        {
          id: 2,
          type: '活动套餐',
          content: '校园套餐卡活动即将开始，点击联系客服提供新办理的手机号及短信验证码进行活动报名参与',
          // time: '2025-05-08 09:15:22',
          actions: [
            { text: '联系客服', primary: true }
          ]
        },
        
      ],
      // 访客数据
      visitors: [],
	  page:1,
	  limit:15,
	  interactionsVisitor:[]
    }
  },
  created() {
  	this.generateParticles()
  },
  onLoad() {
  	this.getNotification()
	this.getVisitor()
  },
  methods: {
	async getVisitor(){
		const res = await this.$api.get('/Visitor/index','',true)
		if(res.data.code === 200) {
			this.interactionsVisitor = res.data.data
		}
	},
	async getNotification(){
		const params = {
			page:this.page,
			limit:this.limit,
		}
		const res = await this.$api.get('/Notification/index',params,true)
		if(res.data.code === 200) {
			this.interactions = res.data.data
		}
	},
	async userSend(item) {
			
			
		},
	async details(item){
		const params = {
			visited_id:item.sender.user_id,
			visited_type:2,
			related_id:item.id,
			content:'confession'
		}
		const res = await this.$api.post('/Visitor/logVisit',params,true)
		uni.navigateTo({
			url:'/pagesA/user?id='+item.sender.user_id
		})
		uni.navigateTo({
			url:'/pages/index/noteDetail?id='+item.related_content.id
		})
	},
	async userSend(item) {
		const params = {
			visited_id:item.sender.user_id,
			visited_type:1,
			related_id:item.id,
			content:'users'
		}
		const res = await this.$api.post('/Visitor/logVisit',params,true)
		uni.navigateTo({
			url:'/pagesA/user?id='+item.sender.user_id
		})
	},
	generateParticles() {
	  const particles = []
	  for (let i = 0; i < 30; i++) {
	    particles.push({
	      x: Math.random() * 100,
	      y: Math.random() * 100,
	      size: Math.random() * 6 + 2,
	      color: `hsl(${Math.random() * 60 + 200}, 70%, 60%)`,
	      opacity: Math.random() * 0.4 + 0.1,
	      delay: Math.random() * 3
	    })
	  }
	  this.particles = particles
	},
	send(item){
		// uni.showToast({
		// 	title:'发私信',
		// 	icon:'none'
		// })
	},
    switchCategory(type, index) {
      this.currentCategory = type
      // 计算滚动位置使当前分类居中
	  this.getVisitor()
	  this.generateParticles()
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)
        query.select(`.category-item:nth-child(${index + 1})`).boundingClientRect()
        query.select('.category-scroll').boundingClientRect()
        query.exec((res) => {
          if (res[0] && res[1]) {
            const itemLeft = res[0].left
            const scrollWidth = res[1].width
            const itemWidth = res[0].width
            this.scrollLeft = itemLeft - (scrollWidth - itemWidth) / 2
          }
        })
      })
    },
    onRefresh() {
      this.refreshing = true
      // 模拟刷新数据
      setTimeout(() => {
        this.refreshing = false
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        })
      }, 1000)
    },
    loadMore() {
      if (this.loading || this.noMore) return
      this.loading = true
      // 模拟加载更多数据
      setTimeout(() => {
        this.loading = false
        // 这里简单模拟，实际应该追加数据
        this.noMore = true
      }, 1000)
    },
    formatTime(time) {
      const now = new Date()
      const date = new Date(time)
      const diff = (now - date) / 1000 // 秒数差
      
      if (diff < 60) {
        return '刚刚'
      } else if (diff < 3600) {
        return `${Math.floor(diff / 60)}分钟前`
      } else if (diff < 86400) {
        return `${Math.floor(diff / 3600)}小时前`
      } else if (diff < 2592000) {
        return `${Math.floor(diff / 86400)}天前`
      } else {
        return date.toLocaleDateString()
      }
    },
    getActionText(type) {
      const map = {
        like: '点赞了你的',
        comment: '评论了你的',
        reply: '回复了你的',
        view: '查看了你的',
		follow:'关注了你',
		mention:'提到了你'
      }
      return map[type] || ''
    },
    getNoticeIcon(type) {
      const map = {
        '系统': 'notification',
        '活动': 'flag',
        '公告': 'sound'
      }
      return map[type] || 'info'
    },
    getNoticeColor(type) {
      const map = {
        '系统': '#FF5C8D',
        '活动': '#4CD964',
        '公告': '#007AFF'
      }
      return map[type] || '#666'
    },
    toChat(userId) {
      uni.navigateTo({
        url: `/pages/message/chat?id=${userId}`
      })
    },
    handleNoticeAction(item, action) {
      if (action.text === '修改密码') {
        uni.navigateTo({
          url: '/pages/settings/security'
        })
      } else if (action.text === '查看详情') {
        uni.navigateTo({
          url: '/pages/activity/detail?id=123'
        })
      }
      this.$refs.messageMenu.close()
    },
    followVisitor(item) {
      item.isFollowed = true
      uni.showToast({
        title: '关注成功',
        icon: 'success'
      })
    },
    showMessageMenu() {
      this.$refs.messageMenu.open()
    },
    startNewChat() {
      this.$refs.messageMenu.close()
      uni.navigateTo({
        url: '/pages/message/contacts'
      })
    },
    clearAllMessages() {
      this.$refs.messageMenu.close()
      uni.showModal({
        title: '提示',
        content: '确定要清空所有消息吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '已清空',
              icon: 'success'
            })
          }
        }
      })
    },
    openSettings() {
      this.$refs.messageMenu.close()
      uni.navigateTo({
        url: '/pages/settings/message'
      })
    }
  }
}
</script>

<style scoped>
	
.message-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  position: relative;
}

/* 头部背景 */
.header-bg {
  height: 180rpx;
  background: linear-gradient(135deg, #FF9E9E, #FF5C8D);
  position: relative;
  overflow: hidden;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-bg .avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 3rpx solid rgba(255, 255, 255, 0.5);
  position: absolute;
  left: 40rpx;
  bottom: -50rpx;
  z-index: 10;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
}

.header-bg .username {
  position: absolute;
  left: 160rpx;
  bottom: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
}

/* 分类导航 */
.category-scroll {
  white-space: nowrap;
  padding: 30rpx 0 20rpx;
  background: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}

.category-item {
  display: inline-block;
  padding: 0 40rpx;
  font-size: 32rpx;
  color: #666;
  position: relative;
  height: 60rpx;
  line-height: 60rpx;
}

.category-item.active {
  color: #FF5C8D;
  font-weight: bold;
}

.category-item .underline {
  position: absolute;
  bottom: 10rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background: #FF5C8D;
  border-radius: 3rpx;
  animation: underlineScale 0.3s ease-out;
}

@keyframes underlineScale {
  from { transform: translateX(-50%) scaleX(0); }
  to { transform: translateX(-50%) scaleX(1); }
}

.badge {
  position: absolute;
  top: 5rpx;
  right: 25rpx;
  background: #FF5C8D;
  color: #fff;
  font-size: 20rpx;
  min-width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  border-radius: 15rpx;
  padding: 0 8rpx;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 消息列表 */
.message-list {
  flex: 1;
  position: relative;
  z-index: 1;
}

/* 私信列表项 */
.message-item {
  display: flex;
  padding: 25rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.5s ease-out both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

.message-item .unread-dot {
  position: absolute;
  left: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: #FF5C8D;
  animation: pulse 1.5s infinite;
}

.message-item .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.message-item .content {
  flex: 1;
  overflow: hidden;
}

.message-item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.message-item .name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300rpx;
}

.message-item .time {
  font-size: 24rpx;
  color: #999;
}

.message-item .preview {
  display: flex;
  align-items: center;
}

.message-item .preview .text {
  font-size: 28rpx;
  color: #666;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.message-item .preview .tag {
  font-size: 22rpx;
  color: #FF5C8D;
  background: rgba(255, 92, 141, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 15rpx;
}

.message-item .wave-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(255, 92, 141, 0.1) 0%, transparent 70%);
  opacity: 0;
  animation: wave 2s infinite;
}

@keyframes wave {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* 互动通知项 */
.interaction-item {
  display: flex;
  padding: 25rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.5s ease-out both;
}

.interaction-item .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.interaction-item .content {
  flex: 1;
  padding-right: 20rpx;
}

.interaction-item .text {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  line-height: 1.4;
}

.interaction-item .name {
  color: #FF5C8D;
  font-weight: bold;
}

.interaction-item .target {
  color: #FF5C8D;
}

.interaction-item .time {
  font-size: 24rpx;
  color: #999;
}

.interaction-item .post-image {
  width: 80rpx;
  height: 80rpx;
  flex-shrink: 0;
  border-radius: 10rpx;
}

.interaction-item .like-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: likeEffect 1s ease-out;
}

@keyframes likeEffect {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -100%) scale(0.5); }
}

/* 系统通知项 */
.notice-item {
  padding: 25rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.5s ease-out both;
}

.notice-item .title {
  display: flex;
  align-items: center;
  margin-bottom: 15rpx;
}

.notice-item .type {
  font-size: 30rpx;
  font-weight: bold;
  margin-left: 10rpx;
  margin-right: auto;
}

.notice-item .time {
  font-size: 24rpx;
  color: #999;
}

.notice-item .content {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.notice-item .actions {
  display: flex;
  justify-content: flex-end;
}

.notice-item .action-btn {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  margin-left: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 30rpx;
  background: #fff;
}

.notice-item .action-btn.primary {
  background: #FF5C8D;
  color: #fff;
  border-color: #FF5C8D;
}

/* 访客记录项 */
.visitor-item {
  display: flex;
  padding: 25rpx;
  margin: 20rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  animation: fadeInUp 0.5s ease-out both;
}

.visitor-item .avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.visitor-item .content {
  flex: 1;
}

.visitor-item .top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.visitor-item .name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.visitor-item .time {
  font-size: 24rpx;
  color: #999;
}

.visitor-item .info {
  display: flex;
  font-size: 26rpx;
  color: #666;
}

.visitor-item .info text {
  margin-right: 10rpx;
}

.visitor-item .action {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

.visitor-item .follow-btn,
.visitor-item .followed-btn {
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  border-radius: 30rpx;
  background: #FF5C8D;
  color: #fff;
}

.visitor-item .followed-btn {
  background: #f5f5f5;
  color: #999;
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #999;
}

/* 浮动按钮 */
.float-btn {
  position: fixed;
  right: 40rpx;
  bottom: 120rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9E9E, #FF5C8D);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8rpx 30rpx rgba(255, 92, 141, 0.3);
  z-index: 10;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20rpx); }
}

/* 消息菜单 */
.message-menu {
  background: #fff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 40rpx;
}

.message-menu .menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  font-size: 32rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.message-menu .menu-item:last-child {
  border-bottom: none;
}

.message-menu .menu-item text {
  margin-left: 20rpx;
}
</style>